<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>
			arc - https://www.runoob.com/w3cnote/html5-canvas-intro.html
		</title>
	</head>

	<body>
		<canvas id="canvas" width="1200" height="1200"></canvas>

		<script type="text/javascript">
			function drawArc() {
				var canvas = document.getElementById('canvas')
				if (!canvas.getContext) return
				var ctx = canvas.getContext('2d')
				ctx.beginPath()
				ctx.arc(50, 50, 40, 0, Math.PI / 2, false)
				ctx.stroke()

				ctx.beginPath()
				ctx.arc(150, 50, 40, 0, -Math.PI / 2, true)
				ctx.closePath()
				ctx.stroke()

				ctx.beginPath()
				ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false)
				ctx.fill()

				ctx.beginPath()
				ctx.arc(150, 150, 40, 0, Math.PI, false)
				ctx.fill()

				ctx.beginPath()
				ctx.moveTo(200, 200)
				ctx.arcTo(200, 400, 500, 400, 200)
				ctx.lineTo(500, 400)

				ctx.stroke() // 绘制路径
				// ctx.fill(); // 填充
			}

			drawArc()
		</script>
	</body>
</html>
